<script setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts';
import chinaMap from '@/assets/json/china_prov.json'
let chart = ref();
onMounted(()=>{
    chartInit()  // 初始化echarts
})
function chartInit() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chart.value);
    echarts.registerMap('china',chinaMap)
    // 指定图表的配置项和数据
    var option = {
        geo:{
            type: 'map',
            map: 'china',
            label: {
                show:true,
                color: '#fff',
                fontSize: 10,
            },
            itemStyle: {
                areaColor: '#4D98F8',
                borderColor: '#fff'
            },
            zoom:1.2,
            emphasis: {
                label: {
                    color: '#333',
                },
                itemStyle: {
                    areaColor: '#1BC1AD'
                }
            }
        },
        series: [
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: '#f00',
                    color: '#f00'
                },
                symbolSize:20,
                rippleEffect: {
                    brushType: 'stroke',
                    scale:3
                },
                data:[
                    { name: '大连',value: [121.62, 38.92],},
                    {name: '乌鲁木齐',value: [87.68, 43.77]},
                    {name: '哈尔滨',value: [126.63, 45.75]},
                    {name: '三亚',value: [109.511909, 18.252847]},
                    {name: '长沙',value: [113, 28.21]},
                ],
                
            },
            //箭头动画
            {
                type: "lines",
                effect: {
                    show:true,
                    period: 2,
                    symbol: 'arrow',
                    symbolSize: 8
                },
                lineStyle: {
                    color: '#C1A43C',
                    width: 1,
                    opacity: 1,
                    curveness: 0.3,
                },
                data: [
                    [
                        {coord: [126.63, 45.75]},
                        {coord:  [113, 28.21],},
                    ],
                    [
                        {coord:  [109.511909, 18.252847]},
                        {coord:  [113, 28.21],},
                    ],
                    [
                        {coord:  [87.68, 43.77]},
                        {coord:  [121.62, 38.92],},
                    ]
                ]
            }
        ]    
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
</script>

<template>
<div ref="chart" style="width: 100%;height:600px;"></div>
</template>

<style scoped>

</style>
